<template>
  <div class="Grade">
    <el-tabs v-model="toogle">
      <el-tab-pane label="学生平时加分" name="0"></el-tab-pane>
      <el-tab-pane label="学生成绩分析" name="1"></el-tab-pane>
    </el-tabs>
    <div class="grade-enter" v-if="toogle === '0'">
      <el-select
        size="large"
        placeholder="请选择学生"
        v-model="studentSelect"
        :disabled="classSelect.length > 0"
        style="width: 200px; margin-right: 20px"
      >
        <el-option
          v-for="item in studentInfo"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="classSelect"
        multiple
        @blur="handleSelectBlur"
        size="large"
        :disabled="!studentSelect"
        placeholder="请选择学生的选课"
        style="max-width: 60%; min-width: 200px"
      >
        <el-option
          v-for="item in classInfo"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <div>
            <span :style="{ color: item.value }">{{ item.label }}</span>
          </div>
        </el-option>
        <template #tag>
          <el-tag v-for="color in classSelect" type="success" :key="color">
            {{ color }}
          </el-tag>
        </template>
      </el-select>
      <div class="grage-e-input">
        <el-form
          :model="gradeEnter"
          size="large"
          status-icon
          v-show="classSelect.length > 0"
          label-position="top"
        >
          <el-form-item
            v-for="(item, index) in gradeEnter"
            :key="index"
            :label="`${item.courseName}：`"
          >
            <el-input
              style="width: 100%"
              v-model="item.value"
              :placeholder="`学生${item.courseName}加分`"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button plain @click="hancleReset">重置</el-button>
            <el-button
              plain
              type="success"
              @click="
                () => {
                  studentSelect = ''
                  classSelect = []
                }
              "
            >
              取消
            </el-button>
            <el-button type="primary" @click="handleEnter">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-else>
      <analyze></analyze>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reqTeacherGetStudent } from '@/api/teacher'
import { reqGetAllSchool } from '@/api/class'
import { useRoute } from 'vue-router'
import analyze from './components/analyze.vue'

// 获取路由信息
const route = useRoute()
// 判断页面状态
const toogle = ref<any>('0')
// 学生信息
const studentInfo = ref<any>([])
// 课程信息
const classInfo = ref<any>([])
const studentSelect = ref<string>('')
// 选择的课程
const classSelect = ref<string[]>([])
// 学生平时成绩信息
const gradeEnter = ref<any>([])

// 数据传递
if (route.query.toogle) {
  toogle.value = route.query.toogle
}

// 获取学生信息与选课数据
const teacherGetStudent = async () => {
  await Promise.all([
    reqTeacherGetStudent(),
    reqGetAllSchool({ pageNO: 1, pageSize: 999999 }),
  ]).then((res) => {
    if (res[0].code === 200 && res[1].code === 200) {
      studentInfo.value = res[0].data.map((item: any) => ({
        value: item.username,
        label: item.username,
      }))
      classInfo.value = res[1].data.records.map((item: any) => ({
        value: item.schoolName,
        label: item.schoolName,
      }))
    }
  })
}

// 学生信息填写成功触发
const handleSelectBlur = () => {
  if (classSelect.value.length === 0) return
  // 数据清空
  gradeEnter.value = []

  // 根据选课的数量渲染出输入框
  classSelect.value.forEach((courseName: string) => {
    gradeEnter.value.push({
      courseName,
      value: '',
    })
  })
}

// 表单数据重置
const hancleReset = () => {
  gradeEnter.value.forEach((item: any) => {
    item.value = ''
  })
}

// 学生成绩信息提交
const handleEnter = () => {
  for (const item of gradeEnter.value) {
    if (item.value) {
      if (Number(item.value) > 100) {
        ElMessage.error('分数填写错误')
        return // 使用 return 跳出整个函数
      }
    } else {
      ElMessage.error('学生成绩不能为空')
      return // 使用 return 跳出整个函数
    }
  }

  // 数据清空
  studentSelect.value = ''
  classSelect.value = []
  ElMessage.success('加分成功！')
}

onMounted(() => {
  teacherGetStudent()
})
</script>

<style lang="scss" scoped>
.Grade {
  padding: 20px;

  & > .grade-enter {
    margin-top: 20px;

    & > .grage-e-input {
      margin-top: 50px;
      width: 300px;
    }
  }
}
:deep(.el-form-item--label-top .el-form-item__label) {
  color: #4093ff;
  font-weight: 600;
}
</style>
